<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改</title>
</head>
<script src="/js/global.js"></script>
<link rel="stylesheet" href="/css/font.css" type="text/css"/>
<link rel="stylesheet" href="/css/layui.css" type="text/css"/>
<link rel="stylesheet" href="/css/xadmin.css" type="text/css"/>
<script type="text/javascript" src="/js/layui.js" ></script>
<script type="text/javascript" src="/js/xadmin.js" ></script>
<link rel="stylesheet" href="/css/style.css" type="text/css"/>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
<body>

<div class="layui-form" style="margin-top: 15px;">

    <div class="layui-form-item" style="width: 80%;display: none">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
            <input type="text" name="petsid" id="petsid" lay-verify="required" placeholder="ID"
                   autocomplete="off" class="layui-input" disabled>
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" lay-verify="required" placeholder="账号"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">种类</label>
        <div class="layui-input-block">
            <select name="typeid" id="typeid" lay-verify="" lay-search="">
            </select>
            <input type="text" name="typeides" id="typeides" style="display: none;">
        </div>
    </div>

    <label class="layui-form-label">状态</label>
    <div class="layui-input-inline layui-form" style="width: 200px;">
        <select name="status" id="status" lay-verify="" lay-search="">
            <option value="1">已领养</option>
            <option value="0" selected>未领养</option>
        </select>
        <input type="text" name="statuses" id="statuses" style="display: none;">
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
            <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
                <i class="layui-icon layui-icon-upload"></i>
                <div>点击上传，或将文件拖拽到此处</div>
                <div id="ID-upload-demo-preview">
                    <hr>
                    <img src="" id="imges" alt="上传成功后渲染" style="max-width: 100%;height: 100px;">
                </div>
            </div>
            <input type="text" name="img" id="img" style="display: none">
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea name="description" placeholder="描述" class="layui-textarea" id="description" cols="100" rows="5"></textarea>

        </div>
    </div>

    <div class="layui-form-item" style="width: 80%;">
        <label class="layui-form-label">喜欢的人数</label>
        <div class="layui-input-block">
            <input type="text" name="likenum" id="likenum" disabled autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="width: 80%; text-align: center;">
        <button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
    </div>

</div>
<script type="text/javascript">
    layui.use(['laydate', 'form'], function() {
        var laydate = layui.laydate,
            form = layui.form,
            $ = layui.jquery;

        //查询所有分类
        $.get("../type/findAllType", function (res) {
            if (res.code === 200) {
                let data = res.data;
                //循环遍历加入到下拉列表中typeid
                for (let i = 0; i < data.length; i++) {
                    let option = '<option value="' + data[i].typeid + '">' + data[i].name + '</option>';
                    $("#typeid").append(option);
                }
            }
            $("#typeid").val($("#typeides").val());
            $("#status").val($("#statuses").val());
            form.render('select');
        })

        upload.render({
            elem: '#ID-upload-demo-drag',
            url: '../upload/img', // 实际使用时改成您自己的上传接口即可。
            before: function (obj) {
                layer.load();
            },
            done: function (res) {
                layer.closeAll('loading');
                if (res.code===200){
                    layer.msg('上传成功');
                    $('#ID-upload-demo-preview').removeClass('layui-hide')
                        .find('img').attr('src', res.msg);
                    $("#img").val(res.msg);
                }else{
                    layer.msg(res.msg);
                }
            },
            error: function(){
                layer.closeAll('loading');
                return layer.msg("网络繁忙，请稍后再试！！！");
            }
        });

        form.on('submit(formDemo)', function(data) {
            $.post("../pets/edit", data.field, function(res) {
                if (res.code === 200) {
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 2000
                    }, function() {
                        var index = parent.layer.getFrameIndex(window
                            .name); //获取当前窗口的name
                        parent.layer.close(index); //关闭窗口
                    });
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 2000
                    });
                }
            })
        });
    })
</script>
</body>
</html>
